<template>
  <div class="h-full flex flex-col">
    <el-card class="h-full border-0 rounded-0 shadow-none">
      <template #header>
        <div class="flex justify-between items-center">
          <h3 class="font-medium text-gray-900">分析结果</h3>
          <el-button 
            size="small" 
            type="primary" 
            @click="exportReport"
          >
            <el-icon><Document /></el-icon>
            导出报告
          </el-button>
        </div>
      </template>
      
      <div class="space-y-6">
        <!-- 指标概览 -->
        <el-card class="border border-gray-100">
          <template #header>
            <h4 class="font-medium text-gray-900">指标概览</h4>
          </template>
          
          <div class="grid grid-cols-2 gap-4">
            <el-card 
              v-for="(indicator, index) in analysisResult.indicators" 
              :key="index" 
              class="border border-gray-100 p-4 hover:shadow-md transition-shadow"
            >
              <div class="text-sm text-gray-500 mb-1">{{ indicator.name }}</div>
              <div class="text-2xl font-bold">{{ indicator.value }}</div>
              <div class="text-xs text-gray-500 mt-1">
                {{ indicator.unit }}
                <span v-if="indicator.change" :class="indicator.change > 0 ? 'text-green-500' : 'text-red-500'">
                  {{ indicator.change > 0 ? '↑' : '↓' }}{{ Math.abs(indicator.change) }}%
                </span>
              </div>
            </el-card>
          </div>
        </el-card>
        
        <!-- 分析步骤 -->
        <el-card class="border border-gray-100">
          <template #header>
            <h4 class="font-medium text-gray-900">分析步骤</h4>
          </template>
          
          <el-steps :space="10" :active="analysisResult.steps.length" finish-status="success" align-center>
            <el-step v-for="(step, index) in analysisResult.steps" :key="index" :title="step.title"></el-step>
          </el-steps>
          
          <div class="mt-4 space-y-4">
            <el-collapse v-model="activeNames">
              <el-collapse-item 
                v-for="(step, index) in analysisResult.steps" 
                :key="index" 
                :name="index.toString()"
              >
                <template #title>
                  <span class="font-medium">步骤 {{ index + 1 }}: {{ step.title }}</span>
                </template>
                <div class="p-3 bg-gray-50 rounded">
                  <p class="text-gray-700 mb-2">{{ step.description }}</p>
                  <pre v-if="step.data" class="bg-gray-800 text-white p-3 rounded text-xs overflow-x-auto">
{{ JSON.stringify(step.data, null, 2) }}
                  </pre>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
        
        <!-- 结论与建议 -->
        <el-card class="border border-gray-100">
          <template #header>
            <h4 class="font-medium text-gray-900">结论与建议</h4>
          </template>
          
          <div class="p-4 bg-blue-50 rounded">
            <p class="text-gray-700" v-html="analysisResult.conclusion"></p>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useAnalysisStore } from '@/stores/analysis'
import { Document } from '@element-plus/icons-vue'

const analysisStore = useAnalysisStore()
const activeNames = ref(['0'])

const analysisResult = computed(() => {
  return analysisStore.currentAnalysis || { 
    indicators: [], 
    steps: [], 
    conclusion: '请输入查询条件以获取分析结果' 
  }
})

const exportReport = () => {
  // 导出报告功能
  ElMessage.info('报告导出功能正在开发中...')
}
</script>